<template>
  <div class="footer">
    <span class="todo-count">共{{ lastLength }}条未完成任务</span>
    <ul class="filters"></ul>
    <button class="clear-completed" @click="emit('clearCompleted')">
      清空任务
    </button>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
const props = defineProps({
  lastLength: String,
  status: String,
});
const emit = defineEmits(["updateStatus", "clearCompleted"]);
</script>

<style scoped>
.todo-count {
  display: block;
  position: relative;
  top: 20px;
  left: -57px;
}
.filters {
  position: absolute;
  left: calc(50% - 100px);
  right: auto;
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  margin-left: auto;
}
.filters li {
  margin-right: 10px;
}
.filters li:last-child {
  margin-right: 0;
}
a {
  text-decoration: none;
}
.selected {
  font-weight: bold;
  color: #333;
  text-decoration: none;
  cursor: default;
  pointer-events: none;
}
.clear-completed {
  float: right;
  margin-top: -8px;
  margin-right: 10px;
  background-color: rgb(14, 86, 86);
  border: 1px solid #ccc;
  font-size: 16px;
  border-radius: 3px;
  padding: 5px 10px;
}
</style>